<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/* margin塌陷问题 */
		* {
			margin: 0;
			padding: 0;
		}

		.son1,
		.son2 {
			width: 150px;
			height: 150px;
		}



		.son1 {
			background-color: red;
			/* 问题1 兄弟margin */
			/* margin-bottom: 20px; */



			/* 问题2 子盒子给margin会让父盒子塌陷*/
			margin-top: 20px;

			/*
			解决问题2：
			给子元素设置成行内块
			 */
			/* display: inline-block; */


		}

		.son2 {
			background-color: blue;
			/* 问题1 兄弟margin */
			margin-top: 20px;
		}

		.box {

			width: 500px;
			background-color: antiquewhite;

			/* 
				解决问题2
				给父盒子固定定位
			 */
			/* position: fixed; */

			/* 
			解决问题1：
			 兄弟元素在标准文档流margin不会叠加，以较大的为准，所以我们可以让元素脱离文档流就可以正常的设置margin
			 
			 */



			/* 	display: flex;
			flex-direction: column; */

			/* 
			
			
			
			解决问题2
			给父盒子加border
			 */
			/* border-top: 1px solid transparent; */




			/* 
				解决问题2 
				给父盒子overflow: hidden，简单容易记得，但是这个方式会隐藏溢出，从在一定的缺陷
			 */
			/* overflow: hidden，; */




			/*
				解决问题2 
				给父盒子display: table
			 */
			/* display: table; */
		}
	</style>
	<body>
	</body>
	<div class="box">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>

	<script>

	</script>
</html>